<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                margin: 200px;
            }

            span {
                display: inline-block;
                width: 40px;
                height: 40px;
                background-color: #333;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <div>
            <span class="hour"></span>
            <span class="minute"></span>
            <span class="second"></span>
        </div>
        <script type="text/javascript">
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            var inputTime = +new Date('2022-2-11 17:00:00');
            countDown();
            //开启定时器
            setInterval(countDown, 1000);

            function countDown() {
                var nowTime = +new Date();
                var times = (inputTime - nowTime) / 1000;
                var h = parseInt(times / 60 / 60 ); //时
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
                var m = parseInt(times / 60 % 60); // 分
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
            }
        </script>

    </body>
</html>
